<template>
  <div>
    <h1>购物车</h1>

    <p>购物车商品数量：{{ $store.getters["cart/length"] }}</p>
    <hr />
    <p>购物车商品数量：{{ length }}</p>
    <p>购物车总价：{{ total }}</p>
    <p>{{ cartList }}</p>

    <button @click="addGood">提交 cart 模块的 addGood 突变</button>
    <button @click="syncAddGood">派发 cart 模块的 syncAddGood 动作</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  computed: {
    // ...mapState(["cartList"]), // cartList 是 cart 子模块中的数据
    ...mapState("cart", ["cartList"]), // 这样才行，第一个参数是模块的名字
    ...mapGetters("cart", ["length", "total"]),
  },

  // 上面的展开形式
  // computed: {
  //   cartList() {
  //     return this.$store.state.cart.cartList;
  //   },
  //   length() {
  //     return this.$store.getters["cart/length"];
  //   },
  //   total() {
  //     return this.$store.getters["cart/total"];
  //   },
  // },

  // methods: {
  //   ...mapMutations("cart", ["addGood"]),
  //   ...mapActions("cart", ["syncAddGood"]),
  // },

  // 上面的展开形式
  methods: {
    addGood() {
      this.$store.commit("cart/addGood");
    },
    syncAddGood() {
      this.$store.dispatch("cart/syncAddGood");
    },
  },

  created() {
    console.log(this.$store);
  },
};
</script>
